<template>
    <div class="com-image-file-input">
        <button type="button" class="c-btn sm" @click="$refs.file.click()">{{ imgName||value ? '重新选择' : '选择文件' }}</button>
        <p class="file-tips">{{ imgName ? imgName : (value ? value : '未选择任何文件') }}</p>
        <p v-if="! imgUrl">
            <span v-if="width || height">
                图片尺寸：
                <template v-if="width">
                    <template v-if="width.type=='suggest'">建议宽度{{ width.value }}px</template>
                    <template v-if="width.type=='max'">最大宽度{{ width.value }}px</template>
                    <template v-if="width.type=='min'">最小宽度{{ width.value }}px</template>
                    <template v-if="width.type=='equal'">宽度须为{{ width.value }}px</template>{{ height ? '，' : '' }}
                </template>
                <template v-if="height">
                    <template v-if="height.type=='suggest'">建议高度{{ height.value }}px</template>
                    <template v-if="height.type=='max'">最大高度{{ height.value }}px</template>
                    <template v-if="height.type=='min'">最小高度{{ height.value }}px</template>
                    <template v-if="height.type=='equal'">高度须为{{ height.value }}px</template>
                </template>。
            </span>图片大小不超过{{ fileSize }}Mb。
        </p>
        <div v-else-if="showPreview && imgUrl" class="img-wrap">
            <img :src="imgUrl">
        </div>
        <input type="file" ref="file" style="display: none" @change="changeImage"/>
    </div>
</template>
<script>
    import axios from 'axios';
    import { mytips } from '@/module/tools';
    export default {
        data(){
            return {
                loading: null,
                imgName: '',
            }
        },
        props: {
            value: String, // 图片名称
            imgUrl: String,
            fileSize: {type: Number, default: 1},
            width: null, // 属性：type-max、min、equal、suggest；value
            height: null, // 属性：type-max、min、equal、suggest；value
            path: {type: String, default: '/am/billBo/uploadPic'},
            showPreview: {type: Boolean, default: true},
        },
        methods: {
            changeImage(ev){
                let file = ev.target.files[0];
                // 过滤图片大小
                if(file.size > this.fileSize * 1024 * 1024){
                    mytips("图片最大只能上传" + this.fileSize + "Mb");
                    ev.target.value = null;
                    return false;
                }
                // 过滤图片类型
                if(file.type != 'image/jpeg' && file.type != 'image/gif' && file.type != 'image/png' && file.type != 'image/bmp'){
                    mytips("只能上传图片");
                    ev.target.value = null;
                    return false;
                }
                let path = window.URL.createObjectURL(file);
                let postImg = () => {
                    let formData = new FormData();
                    formData.append('file', file);
                    this.loading = this.$loading({
                        text: '加载中...',
                        background: 'rgba(0,0,0,0.1)',
                    });
                    axios.post(
                        API_PATH + this.path,
                        formData,
                        { headers: { 'Content-Type': 'multipart/form-data' } },
                    ).then(
                        res => {
                            this.loading.close();
                            if(res.data.code == 0){
                                this.imgName = file.name;
                                this.$emit('update:imgUrl', res.data.data.image_url);
                                this.$emit('input', res.data.data.image_name);
                            }
                        },
                        xhr => this.loading.close()
                    );
                };
                if((this.width && this.width.type!='suggest') || (this.height && this.height.type!='suggest')){
                    // 过滤图片宽高
                    let img = document.createElement('img');
                    img.src = path;
                    img.onload = () => {
                        let notValid = false, tips = '图片尺寸';
                        if(this.width){
                            if(this.width.type == 'max' && img.naturalWidth > this.width.value){
                                notValid = true;
                                tips += '宽度不能大于' + this.width.value;
                            }else if(this.width.type == 'min' && img.naturalWidth < this.width.value){
                                notValid = true;
                                tips += '宽度不能小于' + width.value;
                            }else if(this.width.type == 'equal' && img.naturalWidth != this.width.value){
                                notValid = true;
                                tips += '宽度必须为' + this.width.value;
                            }
                        }
                        if(this.height){
                            if(this.height.type == 'max' && img.naturalHeight > this.height.value){
                                tips += notValid ? '，' : '';
                                notValid = true;
                                tips += '高度不能大于' + this.height.value;
                            }else if(this.height.type == 'min' && img.naturalHeight < this.height.value){
                                tips += notValid ? '，' : '';
                                notValid = true;
                                tips += '高度不能小于' + this.height.value;
                            }else if(this.height.type == 'equal' && img.naturalHeight != this.height.value){
                                tips += notValid ? '，' : '';
                                notValid = true;
                                tips += '高度必须为' + this.height.value;
                            }
                        }
                        img = null;
                        if(notValid){
                            tips += '。';
                            mytips(tips);
                            this.$refs.file.value=null;
                            this.imgName = '';
                            this.$emit('update:imgUrl', '');
                            this.$emit('input', '');
                            return false;
                        }
                        postImg();
                    }
                }else{
                    postImg();
                }
            },
        }
    }
</script>
<style lang="scss">
    .com-image-file-input{
        .file-tips{display: inline-block;}
        .img-wrap{margin-top: 10px;width: 360px;}
        .img-wrap img{width: 100%;}
    }
</style>
